<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside class="home-aside" width="250px">
      <!-- logo -->
      <div class="home-logo-div">
        <router-link to="/customer/home">
          <el-image
            class="home-logo"
            src="../src/assets/logo_trans.png"
            fit="contain"
          ></el-image
        ></router-link>
      </div>
      <!-- 折叠icon -->
      <el-icon
        class="toggle-button"
        v-model="isCollapse"
        @click="toggleCollapse"
        size="20px"
      >
        <Fold v-if="!isCollapse" />
        <Expand v-if="isCollapse" />
      </el-icon>
      <!-- 侧边栏菜单 -->
      <el-menu
        class="home-menu-vertical"
        :collapse="isCollapse"
        :default-active="$route.path"
        router
        active-text-color="#E3A566"
      >
        <el-menu-item index="/customer/food">
          <el-icon>
            <Search />
          </el-icon>
          <span slot="title">菜品列表</span>
        </el-menu-item>
        <el-menu-item index="/customer/recommend">
          <el-icon>
            <MagicStick />
          </el-icon>
          <span slot="title">猜你想吃</span>
        </el-menu-item>
        <el-menu-item index="/customer/order">
          <el-icon>
            <Wallet />
          </el-icon>
          <span slot="title">我的订单</span>
        </el-menu-item>
        <el-menu-item index="/customer/account">
          <el-icon>
            <User />
          </el-icon>
          <span slot="title">我的账号</span>
        </el-menu-item>
      </el-menu>
      <el-image src="../src/assets/plate.png" class="plate-div"></el-image>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header class="food-header" height="80px">
        <div class="ball"></div>
        <div class="food-line"></div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/customer/home' }"> 主页 </el-breadcrumb-item>
          <el-breadcrumb-item>菜品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索&筛选 -->
        <el-row class="food-search-row" :gutter="5">
          <el-col :span="3"
            ><el-input
              v-model="searchQuery"
              prefix-icon="Search"
              placeholder="名称"
              @input="handleSearch"
          /></el-col>
          <el-col :span="4" :offset="0">
            <el-select
              v-model="selectedLabel"
              clearable
              placeholder="类别"
              @change="handleSearch"
            >
              <el-option
                v-for="item in labelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              /> </el-select
          ></el-col>
          <el-col :span="8" :offset="0">
            价格：
            <el-input-number
              v-model="minPrice"
              :min="0"
              :max="100"
              @change="minPriceChange"
              controls-position="right"
            />
            —
            <el-input-number
              v-model="maxPrice"
              :min="0"
              :max="100"
              @change="maxPriceChange"
              controls-position="right"
            />
          </el-col>
          <el-col :span="4" :offset="0">
            排序：
            <el-select
              class="food-sort-basis-select"
              v-model="selectedSortBasis"
              placeholder=" "
              @change="handleSearch"
            >
              <el-option
                v-for="item in sortBasisOptions"
                :key="item.value"
                :label="item.label"
                :value="item.query"
              />
            </el-select>
          </el-col>
          <el-col :span="3" :offset="0">
            <el-button class="food-sort-button" @click="changeAsc"
              ><el-icon class="food-sort-icon" style="color: #e3a566">
                <Sort /> </el-icon></el-button
            ><span>&nbsp{{ ascText }}</span>
          </el-col>
          <el-col :span="2" :offset="0">
            <el-button
              type="info"
              @click="clear"
              class="food-clear-button"
              :disabled="isDisabled"
              >清空筛选</el-button
            >
          </el-col>
        </el-row>
      </el-header>

      <!-- 主体 -->
      <el-main class="food-c-main">
        <div class="recognize-div" @click="gotoRecognition">
          <div>全新上线</div>
          <div class="recognize-title">
            <el-icon size="20px" color="white"><Aim /></el-icon>菜品识别
          </div>
        </div>
        <!-- 食品列表 -->

        <el-tabs
          v-if="isTabShow"
          tab-position="left"
          class="food-tabs"
          @tab-click="getFoodByTab"
          v-model="activeName"
        >
          <el-scrollbar height="520px">
            <el-tab-pane
              v-for="item in labelOptions"
              :label="item['label']"
              :name="item.name"
            >
              <el-row :gutter="10">
                <el-col
                  v-for="foodEntity in foodList"
                  :key="foodEntity.id"
                  :span="6"
                  style="margin-bottom: 10px"
                >
                  <!-- 每个食物卡片 -->
                  <el-card :body-style="{ padding: '0px' }" class="food-card">
                    <el-image
                      class="food-image"
                      :src="foodEntity.photo"
                      fit="cover"
                      @click.native="gotoFoodDetail(foodEntity.id)"
                    >
                    </el-image>
                    <div style="padding: 0px 14px 10px; text-align: left">
                      <div style="font-size: 20px; height: 30px">
                        {{ foodEntity.foodName }}
                      </div>
                      <br />
                      <span
                        ><svg
                          t="1700284969270"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="4261"
                          width="20"
                          height="20"
                        >
                          <path
                            d="M336 972.8c-60.8-128-28.8-201.6 19.2-268.8 51.2-76.8 64-150.4 64-150.4s41.6 51.2 25.6 134.4c70.4-80 83.2-208 73.6-256 160 112 230.4 358.4 137.6 537.6 492.8-281.6 121.6-700.8 57.6-745.6 22.4 48 25.6 128-19.2 166.4-73.6-281.6-256-336-256-336 22.4 144-76.8 300.8-172.8 419.2-3.2-57.6-6.4-96-38.4-153.6-6.4 105.6-86.4 188.8-108.8 294.4C89.6 758.4 140.8 860.8 336 972.8L336 972.8z"
                            p-id="4262"
                            fill="#d81e06"
                          ></path>
                        </svg>
                        {{ foodEntity.saleNumber }}</span
                      >
                      <br />
                      <span>￥ {{ foodEntity.price }}</span>
                      <div class="food-operation-div">
                        <el-button
                          class="food-sub-button"
                          circle
                          size="small"
                          @click="subFood(foodEntity.id)"
                          v-if="foodEntity.foodNumber > 0"
                        >
                          <el-icon class="food-add-icon">
                            <Minus />
                          </el-icon>
                        </el-button>
                        <span v-if="foodEntity.foodNumber > 0"
                          >&nbsp{{ foodEntity.foodNumber }}&nbsp</span
                        >
                        <el-button
                          class="food-add-button"
                          circle
                          size="small"
                          @click="
                            addFood(
                              foodEntity.id,
                              foodEntity.foodName,
                              foodEntity.price,
                              foodEntity.photo
                            )
                          "
                        >
                          <el-icon class="food-add-icon">
                            <Plus />
                          </el-icon>
                        </el-button>
                      </div>
                    </div>
                  </el-card>
                </el-col> </el-row
            ></el-tab-pane>
          </el-scrollbar>
        </el-tabs>
        <!-- 查询结果 -->
        <div v-if="!isTabShow" style="padding-left: 140px">
          <el-scrollbar height="520px">
            <el-row :gutter="20">
              <el-col
                v-for="foodEntity in foodList"
                :key="foodEntity.id"
                :span="6"
                style="margin-bottom: 10px"
              >
                <!-- 每个食物卡片 -->
                <el-card :body-style="{ padding: '0px' }" class="food-card">
                  <el-image
                    class="food-image"
                    :src="foodEntity.photo"
                    fit="cover"
                    @click.native="gotoFoodDetail(foodEntity.id)"
                  >
                  </el-image>
                  <div style="padding: 0px 14px 10px; text-align: left">
                    <span style="font-size: 20px">{{ foodEntity.foodName }}</span
                    ><br />
                    <span
                      ><svg
                        t="1700284969270"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="4261"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M336 972.8c-60.8-128-28.8-201.6 19.2-268.8 51.2-76.8 64-150.4 64-150.4s41.6 51.2 25.6 134.4c70.4-80 83.2-208 73.6-256 160 112 230.4 358.4 137.6 537.6 492.8-281.6 121.6-700.8 57.6-745.6 22.4 48 25.6 128-19.2 166.4-73.6-281.6-256-336-256-336 22.4 144-76.8 300.8-172.8 419.2-3.2-57.6-6.4-96-38.4-153.6-6.4 105.6-86.4 188.8-108.8 294.4C89.6 758.4 140.8 860.8 336 972.8L336 972.8z"
                          p-id="4262"
                          fill="#d81e06"
                        ></path>
                      </svg>
                      {{ foodEntity.saleNumber }}</span
                    >
                    <br />
                    <span>￥ {{ foodEntity.price }}</span>
                    <div class="food-operation-div">
                      <el-button
                        class="food-sub-button"
                        circle
                        size="small"
                        @click="subFood(foodEntity.foodID)"
                        v-if="foodEntity.foodNumber > 0"
                      >
                        <el-icon class="food-add-icon">
                          <Minus />
                        </el-icon>
                      </el-button>
                      <span v-if="foodEntity.foodNumber > 0"
                        >&nbsp{{ foodEntity.foodNumber }}&nbsp</span
                      >
                      <el-button
                        class="food-add-button"
                        circle
                        size="small"
                        @click="
                          addFood(
                            foodEntity.id,
                            foodEntity.foodName,
                            foodEntity.price,
                            foodEntity.photo
                          )
                        "
                      >
                        <el-icon class="food-add-icon">
                          <Plus />
                        </el-icon>
                      </el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-scrollbar>
        </div>
      </el-main>
      <!-- 回到顶部 -->
      <el-backtop :right="80" :bottom="100" />
    </el-container>
  </el-container>
  <!-- 购物车抽屉 -->
  <el-drawer v-model="drawer" title="购物车" direction="rtl">
    <!-- 抽屉主体 -->
    <el-row :gutter="30">
      <el-col v-for="foodEntity in foodInCart" :key="foodEntity.foodID" :span="24">
        <!-- 每个食物卡片 -->
        <el-card :body-style="{ padding: '0px' }" class="food-cart-card">
          <!-- 左侧图像 -->
          <el-image class="food-cart-image" :src="foodEntity.photo" fit="cover">
          </el-image>
          <!-- 右侧信息 -->
          <div class="food-cart-info" style="padding: 0px 14px 10px; text-align: left">
            <span style="font-size: 20px">{{ foodEntity.foodName }}</span
            ><br />
            <span>￥ {{ foodEntity.price }}</span>
            <div class="cart-operation-div">
              <el-button
                class="food-sub-button"
                circle
                size="small"
                @click="subFood(foodEntity.foodID)"
                v-if="foodEntity.foodNumber > 0"
              >
                <el-icon class="food-add-icon">
                  <Minus />
                </el-icon>
              </el-button>
              <span v-if="foodEntity.foodNumber > 0"
                >&nbsp{{ foodEntity.foodNumber }}&nbsp</span
              >
              <el-button
                class="food-add-button"
                circle
                size="small"
                @click="
                  addFood(
                    foodEntity.foodID,
                    foodEntity.foodName,
                    foodEntity.price,
                    foodEntity.photo
                  )
                "
              >
                <el-icon class="food-add-icon">
                  <Plus />
                </el-icon>
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <template #footer>
      <div style="flex: auto">
        <el-button class="loginBtn" round color="#E3A566" @click="checkout"
          >去下单</el-button
        >
      </div>
    </template>
  </el-drawer>

  <!-- 购物车按钮 -->
  <el-affix class="food-cart-affix" position="bottom" :offset="107">
    <el-button circle class="food-cart-button" @click="openCart"
      ><svg
        t="1700300510686"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="7714"
        width="20"
        height="20"
      >
        <path
          d="M352.456912 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C416.446162 860.586595 387.891819 832.032253 352.456912 832.032253L352.456912 832.032253z"
          fill="#E3A566"
          p-id="7715"
        ></path>
        <path
          d="M800.55367 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C864.54292 860.586595 835.816563 832.032253 800.55367 832.032253L800.55367 832.032253z"
          fill="#E3A566"
          p-id="7716"
        ></path>
        <path
          d="M864.026877 800.037628 344.200235 800.037628c-46.099782 0-86.695112-36.466991-92.199563-83.082815l-54.356459-382.043339L166.853687 156.360826c-1.892155-15.653284-16.169326-28.382328-29.930455-28.382328L95.983874 127.978498c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l40.767344 0c46.615824 0 87.727196 36.466991 93.403662 83.082815l30.790526 177.86259L315.473879 708.698135c1.720141 14.793214 15.309256 27.350244 28.726356 27.350244l519.826642 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S881.744331 800.037628 864.026877 800.037628z"
          fill="#E3A566"
          p-id="7717"
        ></path>
        <path
          d="M384.279523 672.05913c-16.685369 0-30.618512-12.729044-31.82261-29.586427-1.376113-17.545439 11.868974-33.026709 29.586427-34.230808l434.163615-31.994625c15.997312-0.172014 29.414413-12.55703 31.134554-26.834201l50.400134-288.295649c1.204099-10.664875-1.720141-22.533848-8.084663-29.758441-4.128339-4.644381-9.288762-7.052579-15.309256-7.052579L319.946246 224.3064c-17.717453 0-31.994625-14.277171-31.994625-31.994625S302.400806 159.973123 319.946246 159.973123l554.05745 0c24.426004 0 46.959852 10.148833 63.301193 28.554342 18.749538 21.157736 27.178229 50.744163 23.565933 81.706703l-50.400134 288.467663c-5.504452 44.895683-45.927768 81.362674-92.027549 81.362674l-431.755417 31.82261C385.82765 671.887116 384.967579 672.05913 384.279523 672.05913z"
          fill="#E3A566"
          p-id="7718"
        ></path></svg
    ></el-button>
  </el-affix>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      isCollapse: false, //是否折叠侧边栏
      foodList: [],
      //输入的名称
      searchQuery: "",
      //选择的标签
      selectedLabel: "",
      //选择的排序，默认按价格
      selectedSortBasis: "",
      labelOptions: [
        {
          name: "Option1",
          label: "氧气创意披萨",
        },
        {
          value: "Option2",
          label: "氧气芝士焗饭",
        },
        {
          value: "Option3",
          label: "氧气元气轻食",
        },
        {
          value: "Option4",
          label: "氧气嗨嗨小吃",
        },
        {
          value: "Option5",
          label: "氧气超爽饮品",
        },
      ],
      sortBasisOptions: [
        {
          value: "Option1",
          label: "按销量",
          query: "saleNumber",
        },
        {
          value: "Option2",
          label: "按评分",
          query: "foodScore",
        },
        {
          value: "Option3",
          label: "按价格",
          query: "price",
        },
      ],
      minPrice: 0,
      maxPrice: 100,
      isAsc: true,
      ascText: "由高到低",
      drawer: false, // 是否打开购物车抽屉
      isTabShow: true, // 是否显示标签面板
      searchByPrice: false, //是否开始按照价格查询
      currentLabelName: "氧气创意披萨", // 记录当前tab的label
      activeName: "",
      isDisabled: true,
    };
  },
  computed: {
    ...mapState({
      foodInCart: (state) => state.foodInCart, // 注意路径是否正确
    }),
  },
  created() {
    this.search();
  },
  methods: {
    // 切换侧边栏的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    search() {
      let _this = this;
      _this.activeName = "Option1";
      _this.getFoodByTab({ index: 0 }); //默认获取第一个标签的菜品
    },
    handleSearch() {
      let _this = this;
      _this.isDisabled = false;
      let url = "/foods?";
      //根据关键字搜索
      if (this.searchQuery != "") {
        url = url + "keyword=" + this.searchQuery + "&&";
      }
      //根据标签搜索
      if (this.selectedLabel != "") {
        url = url + "label=" + this.selectedLabel + "&&";
      }
      //根据价格搜索
      if (this.searchByPrice) {
        url = url + "minPrice=" + this.minPrice + "&&";
        url = url + "maxPrice=" + this.maxPrice + "&&";
      }
      //排序 默认按价格
      if (this.selectedSortBasis === "") {
        this.selectedSortBasis = "price";
      }
      url = url + "orderField=" + this.selectedSortBasis + "&&";
      //排序的顺序
      if (this.isAsc) {
        url = url + "orderType=ASC";
      } else {
        url = url + "orderType=DESC";
      }
      _this.isTabShow = false; // 收起标签面板
      _this.getFoodByUrl(url);
    },
    getFoodByUrl(url) {
      let _this = this;
      this.$http.get(url).then(function (response) {
        _this.foodList = response.data.records;
        console.log("getFoodByTab: _this.foodList = ", _this.foodList);
        for (let i = 0; i < response.data.records.length; i++) {
          _this.foodList[i].photo = "http://localhost:8080" + _this.foodList[i].photo;
          // 根据foodCart中的foodNumber更新
          console.log("_this.foodList = ", _this.foodList);
          console.log("_this.foodInCart = ", _this.foodInCart);
          let foodElement = _this.foodInCart.find(
            (item) => item.foodID === _this.foodList[i].id
          );
          console.log("foodElement = ", foodElement);
          if (foodElement) {
            _this.foodList[i].foodNumber = foodElement.foodNumber;
          } else {
            _this.foodList[i].foodNumber = 0;
          }
        }
      });
    },
    getFoodByTab(item) {
      let _this = this;
      console.log("item.index = ", item.index);
      let foodlabel = this.labelOptions[item.index].label;
      let url = "/foods?label=" + foodlabel;
      _this.getFoodByUrl(url);
    },
    minPriceChange() {
      this.searchByPrice = true;
      this.maxPrice = Math.max(this.maxPrice, this.minPrice);
      this.handleSearch();
    },
    maxPriceChange() {
      this.searchByPrice = true;
      this.minPrice = Math.min(this.maxPrice, this.minPrice);
      this.handleSearch();
    },
    changeAsc() {
      this.isAsc = !this.isAsc;
      if (this.isAsc) {
        this.ascText = "由低到高";
      } else {
        this.ascText = "由高到低";
      }
      this.handleSearch();
    },
    clear() {
      console.log("清空");
      this.searchQuery = "";
      this.selectedLabel = "";
      this.selectedSortBasis = "";
      this.minPrice = 0;
      this.maxPrice = 100;
      this.isAsc = true;
      this.ascText = "由高到低";
      this.search();
      this.isTabShow = true; // 打开标签面板
      this.isDisabled = true;
    },
    openCart() {
      this.drawer = !this.drawer;
    },
    // 添加菜品到购物车
    addFood(foodID, foodName, foodPrice, photoUrl) {
      let _this = this;
      let index = _this.foodInCart.findIndex((option) => option.foodID === foodID);
      if (index === -1) {
        // 购物车里没有这个菜品
        _this.foodInCart.push({
          foodID: foodID,
          foodName: foodName,
          foodNumber: 1,
          price: foodPrice,
          photo: photoUrl,
        });
      } else {
        // 购物车里有这个菜品
        _this.foodInCart[index].foodNumber += 1;
      }
      // 页面计数
      const index2 = _this.foodList.findIndex((option) => option.id === foodID);
      console.log("foodID = ", foodID);
      console.log("_this.foodList = ", _this.foodList);
      console.log("在foodList中索引为 index2 = ", index2);
      if (index2 !== -1) {
        _this.foodList[index2].foodNumber += 1;
      }
      console.log("addFood: 操作结束后, _this.foodInCart = ", _this.foodInCart);
    },
    // 删减购物车里的菜品
    subFood(foodID) {
      let _this = this;
      console.log("subFood: _this.foodInCart = ", _this.foodInCart);
      console.log("subFood: foodID = ", foodID);
      const index = _this.foodInCart.findIndex((option) => option.foodID === foodID);
      console.log("subFood: index = ", index);
      _this.foodInCart[index].foodNumber -= 1;
      console.log("删减后的购物车 = ", _this.foodInCart);
      if (_this.foodInCart[index].foodNumber === 0) {
        _this.foodInCart.splice(index, 1);
      }
      console.log("检查删减后的购物车 = ", _this.foodInCart);

      // 页面计数
      const index2 = _this.foodList.findIndex((option) => option.id === foodID);

      if (index2 !== -1) {
        _this.foodList[index2].foodNumber -= 1;
      }
    },
    // 查看菜品详情
    gotoFoodDetail(id) {
      this.$router.push({
        path: "/customer/fooddetail",
        state: {
          foodID: id,
          lastpage: "/customer/food",
        },
      });
    },
    // 购物车下单
    checkout() {
      let _this = this;
      if (_this.foodInCart === null || _this.foodInCart.length === 0) {
        this.$message({
          message: "购物车为空，请先选择菜品",
          type: "warning",
        });
        return;
      }
      // console.log("_this.foodInCart = ", _this.foodInCart);
      _this.$router.push({
        path: "/customer/checkout",
      });
      // 在组件中调用 action 更新状态
      this.$store.dispatch("updateFoodInCart", _this.foodInCart);
    },
    // 菜品识别
    gotoRecognition() {
      this.$router.push({
        path: "/customer/recognize",
      });
    },
  },
};
</script>

<style>
.food-header {
  margin-top: 30px;
  position: relative;
  /* height: 90px !important; */
}

.el-breadcrumb {
  position: absolute;
  left: 50px;
  font-size: 20px !important;
}

.el-breadcrumb__inner a:hover,
.el-breadcrumb__inner.is-link:hover {
  color: #e3a566 !important;
}

.ball {
  position: absolute;
  top: 25px;
  width: 20px;
  height: 20px;
  background-color: #e3a566;
  border-radius: 50%;
}

/* 水平线 */
.food-line {
  position: absolute;
  top: 33px;
  left: 35px;
  width: 1100px;
  height: 5px;
  background-color: #e3a566;
  border-radius: 2px;
}

.food-search-row {
  position: absolute;
  top: 60px;
}

/* 去除边框 */
.el-select .el-input__wrapper {
  box-shadow: none !important;
}

/* .el-select .el-input.is-focus .el-input__wrapper {
  box-shadow: 0 0 0 1px #e3a566 inset !important;
} */
/* 设置下拉框的字体 */
.el-select-dropdown__item.hover,
.el-select-dropdown__item.is-focus {
  color: #e3a566;
}

.food-search-row .el-input-number {
  width: 90px !important;
}

.food-search-row .el-input-number__decrease:hover,
.food-search-row .el-input-number__increase:hover {
  color: #e3a566 !important;
}

.food-sort-basis-select {
  width: 100px !important;
}

/* 排序按钮 */
.food-sort-button {
  width: 30px !important;
  height: 30px !important;
  box-shadow: var(--el-box-shadow-lighter) !important;
}

.food-sort-button:hover {
  border: #e3a566;
  background-color: rgb(242, 246, 252);
  transform: rotate(180deg);
}

.food-sort-button:focus {
  color: var(--el-button-hover-text-color);
  border-color: #fff !important;
  background-color: #fff !important;
  outline: 0;
}

/* 食品列表 */
.el-tabs__item {
  font-size: 18px !important;
}

.el-tabs__item:hover,
.el-tabs__item.is-active {
  color: #e3a566 !important;
}

.el-tabs__active-bar {
  background-color: #e3a566 !important;
}

/* tabs栏和内容之间的距离 */
.food-tabs > .el-tabs__content {
  /* 上右下左 */
  padding: 10px 0px 0px 20px;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
.food-card {
  height: 330px;
  line-height: 28px;
}
.food-image {
  width: 100%;
  height: 190px;
  cursor: pointer;
}

/* 购物车固钉 */
.food-cart-affix {
  position: fixed;
  right: 30px;
}

.food-cart-button {
  width: 40px !important;
  height: 40px !important;
  box-shadow: var(--el-box-shadow-lighter) !important;
}

.food-cart-button:hover {
  border: #e3a566;
  background-color: rgb(242, 246, 252);
}

.food-cart-button:focus {
  color: var(--el-button-hover-text-color);
  border-color: #fff !important;
  background-color: #fff !important;
  outline: 0;
}

.food-add-button {
  border: 2px solid #e3a566 !important;
}

.food-add-button:focus,
.food-add-button:hover {
  background-color: #fff !important;
}

.food-add-icon {
  font-size: 18px !important;
  color: #e3a566 !important;
}

.food-sub-button {
  border: 2px solid #e3a566 !important;
}

.food-sub-button:focus,
.food-sub-button:hover {
  background-color: #fff !important;
}

.food-operation-div {
  float: right;
}

/* 滚动条透明度设为0 */
.el-scrollbar {
  --el-scrollbar-opacity: 0 !important;
}

/* 购物车抽屉的下单按钮 */
.food-checkout-button {
}

/* 购物车抽屉食物图像 */
.food-cart-image {
  height: 100px;
  width: 110px;
  float: left;
}

.food-cart-card {
  height: 100px;
}

.food-cart-info {
  margin-top: 20px;
  margin-left: 20px;
  width: 220px;
  float: left;
}
.cart-operation-div {
  float: right;
}

/* 购物车抽屉的关闭按钮 */
.el-drawer__close-btn:focus i,
.el-drawer__close-btn:hover i {
  color: #e3a566 !important;
}

.food-c-main {
  position: relative;
}
.recognize-div {
  position: absolute;
  top: 480px;
  left: 4px;
  z-index: 20;
  border-radius: 15px;
  padding: 8px 10px;
  cursor: pointer;
  background: linear-gradient(to right, #e3a566, #ffcf99) !important;
  box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.3);
  line-height: 20px;
}
.recognize-div:hover {
  transform: translateY(-3px);
}
.recognize-title {
  font-family: sanji;
  font-size: 22px;
  color: white;
}
.food-clear-button:focus {
  background-color: var(--el-button-bg-color) !important;
}
</style>
